<template>
  <div class="container">
    <div class="app-container">
      <el-row>
        <el-button size="mini" type="primary" @click="isShow=true">添加角色</el-button>
      </el-row>
      <!-- 表格 -->
      <el-table border stripe :data="roleList">
        <el-table-column label="角色" prop="name" align="center">
          <template #default="{row}">
            <!-- 编辑态 -->
            <template v-if="row.isEdit">
              <el-input v-model="row.editRow.name" />
            </template>
            <template v-else>
              {{ row.name }}
            </template>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="state" align="center">
          <template #default="{row}">
            <template v-if="row.isEdit">
              <el-switch
                v-model="row.editRow.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :inactive-value="0"
                :active-value="1"
              />
            </template>
            <template v-else>
              <el-tag disable-transitions> {{ stateMap[row.state] }}</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="描述" prop="description" width="380" align="center">
          <template #default="{row}">
            <template v-if="row.isEdit">
              <el-input v-model="row.editRow.description" type="textarea" />
            </template>
            <template v-else>
              {{ row.description }}
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <!-- 编辑态 -->
            <template v-if="row.isEdit">
              <el-button type="primary" @click="subEdit(row)">确定</el-button>
              <el-button @click="row.isEdit=false">取消</el-button>
            </template>
            <!-- 展示态 -->
            <div v-else>
              <el-button size="mini" type="warning" @click="btnAssignPerm(row.id)">分配权限</el-button>
              <el-button size="mini" type="success" @click="edit(row)">编辑</el-button>
              <template>
                <el-popconfirm
                  title="这是一段内容确定删除吗？"
                  style="margin-left: 10px"
                  @onConfirm="delRole(row.id)"
                >

                  <el-button slot="reference" size="mini" type="danger">删除</el-button>
                </el-popconfirm>
              </template>

            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="pageInfo.page"
        :page-sizes="[3, 5, 7, 10]"
        :page-size="pageInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      /></div>
    <role-dialog :is-show.sync="isShow" @update-list="loadList" />
    <PermDialog ref="permDialogRef" :is-show-perm.sync="isShowPerm" />
  </div>
</template>
<script>
import { delRole, getSysRole, putRole } from '@/api/role'

import roleDialog from './component/role-dialog.vue'
import PermDialog from './component/perm-dialog.vue'
export default {
  name: 'Role',
  components: { roleDialog, PermDialog },
  data() {
    return {
      pageInfo: {
        pagesize: 5,
        page: 1
      },
      total: 0,
      roleList: [],
      stateMap: {
        0: '未启用',
        1: '已启用',
        2: '已弃用',
        3: '已禁用'
      },
      isShow: false,
      isShowPerm: false
    }
  },
  mounted() {
    this.loadList()
  },
  methods: {
    async loadList() {
      const { rows, total } = await getSysRole(this.pageInfo)
      console.log(rows)
      this.roleList = rows
      this.roleList.forEach(element => {
        this.$set(element, 'isEdit', false)
        // 设置缓存数据
        this.$set(element, 'editRow', {
          name: element.name,
          description: element.description,
          state: element.state,
          id: element.id
        })
      })
      this.total = total
    },
    handleSizeChange(size) {
      this.pageInfo.pagesize = size
      this.loadList()
    },
    handleCurrentChange(page) {
      this.pageInfo.page = page
      this.loadList()
    },
    async delRole(id) {
      try {
        // const res = window.confirm('你确定要删除吗，一旦删除不可复原')
        if (this.roleList.length === 1 && this.pageInfo.page > 1) {
          this.pageInfo.page--
        }
        await delRole(id)
        this.loadList()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    edit(row) {
      row.isEdit = true
      // 进入编辑状态时更新缓存数据
      row.editRow.name = row.name
      row.editRow.description = row.description
      row.editRow.state = row.state
      // row.editRow = { ...row }
    },
    async subEdit(row) {
      try {
        await putRole(row.editRow)
        Object.assign(row, {
          name: row.editRow.name,
          state: row.editRow.state,
          description: row.editRow.description,
          isEdit: false
        })
      } catch (error) {
        console.log(error)
      }
    },
    async btnAssignPerm(id) {
      this.isShowPerm = true
      await this.$refs.permDialogRef.getPermList(id)
    }
  }
}
</script>

